<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/axios.js"></script>
</head>
<body>
    <h1>我的收藏</h1>
    <ul class="list"></ul>
    <script>
        axios.get('/shoucang').then((res) => {
            fn(res.data)    
        })
        // 获取list
        let list=document.querySelector('.list');
        function fn(arr){
            list.innerHTML=arr.map(item=>`<li><span>${item}</span> <span>取消收藏</span></li>`)
        }
        list.onclick = function(e) {
            let el=e.target;
            if(el.innerHTML==='取消收藏'){
                if(confirm('是否取消收藏')){
                    // 获取书的名字
                    let book=el.previousElementSibling.innerHTML;
                    axios.get(`/no/book/${book}`).then((res) => {
                        if(res.data.code===3){
                            el.parentNode.remove()
                        }
                    })
                }
            }
        }

    </script>
</body>
</html>